<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,
            maximum-scale=1, user-scalable=no">
    <style>
        .input-with-clear {
            position: relative;
            display: inline-block;
        }

        .input-with-clear input {
            padding-right: 20px;
        }

        .input-with-clear button {
            position: absolute;
            right: 0;
            top: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            line-height: 1.5em; /* 调整这个值使"×"号垂直居中 */
        }

        input[type="time"] {
            width: 200px;
            height: 25px;
            font-size: 14px;
            margin-left: 20px; /* 增大提示文字和右边输入框的距离 */
        }

        body {
            font-size: 16px;
            overflow: hidden; /* 禁止页面滚动 */
            padding-bottom: 60px; /* 添加底部边距 */
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        label {
            margin: 7px 0; /* 减少输入框间的距离 */
            color: gray; /* 将提示文字的颜色设置为灰色 */
        }

        input[type="text"], input[type="date"], select {
            width: 200px;
            height: 25px;
            font-size: 14px;
            margin-left: 20px; /* 增大提示文字和右边输入框的距离 */
        }

        input[type="submit"], input[type="reset"] {
            margin-top: 20px;
            width: 150px; /* 增加按钮的宽度 */
            height: 30px;
            font-size: 14px;
        }

        .buttons {
            display: flex;
            justify-content: space-between;
            width: 300px; /* 增加按钮组的宽度 */
        }

        input[type="submit"] {
            margin-left: 100px; /* 使确认按钮向右移动100像素 */
        }

        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

        #alarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
            padding-bottom: 6000px; /* 添加底部边距 */
        }

        #alarmTable thead,
        #alarmTable tbody tr {
            display: table; /* 使得列宽一致 */
            width: 100%;
            table-layout: fixed; /* 列宽固定 */
        }

        #更新 {
            position: relative; /* 设置相对定位，作为确认按钮的定位参照 */
        }

        #地铁 {
            position: relative; /* 设置相对定位，作为确认按钮的定位参照 */
        }

        #confirmButton {
            position: absolute; /* 使用绝对定位 */
            right: 20px; /* 距离右边20像素 */
            bottom: 20px; /* 距离底部20像素 */
        }

        #alarmTable th, #alarmTable td {
            text-align: left; /* 左对齐 */
        }

        #alarmTable th:nth-child(1), #alarmTable td:nth-child(1) {
            width: 12%; /* 设置第一列（选择框）的宽度 */
        }

        #alarmTable th:nth-child(2), #alarmTable td:nth-child(2) {
            width: 45%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #alarmTable th:nth-child(3), #alarmTable td:nth-child(3) {
            width: 13%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #alarmTable th:nth-child(3), #alarmTable td:nth-child(3),
        #alarmTable th:nth-child(4), #alarmTable td:nth-child(4) {
            width: 15%; /* 设置第三列（周限次数）和第四列（月限次数）的宽度 */
        }

        #alarmTable td:nth-child(2) {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的文本 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
        }

        body {
            padding-bottom: 60px; /* 添加底部边距 */
        }

        #alarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
        }


        #confirmButton {
            position: absolute;
            top: 23px; /* 将按钮向上移动20px */
            right: 10px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */
        }

        #alarmTable tbody::after {
            content: "";
            display: block; /* 创建一个新的块级元素 */
            height: 40px; /* 设置元素的高度 */
        }

        /* ------------------------------------------ 打卡CSS -----------------------------------*/
        #cardAlarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
            padding-bottom: 6000px; /* 添加底部边距 */
        }

        #cardAlarmTable thead,
        #cardAlarmTable tbody tr {
            display: table; /* 使得列宽一致 */
            width: 100%;
            table-layout: fixed; /* 列宽固定 */
        }

        #打卡 {
            position: relative; /* 设置相对定位，作为确认按钮的定位参照 */
        }

        #cardConfirmButton {
            position: absolute; /* 使用绝对定位 */
            right: 20px; /* 距离右边20像素 */
            bottom: 20px; /* 距离底部20像素 */
        }

        #cardAlarmTable th, #cardAlarmTable td {
            text-align: left; /* 左对齐 */
        }

        #cardAlarmTable th:nth-child(1), #cardAlarmTable td:nth-child(1) {
            width: 15%; /* 设置第一列（选择框）的宽度 */
        }

        #cardAlarmTable th:nth-child(2), #cardAlarmTable td:nth-child(2) {
            width: 65%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #cardAlarmTable th:nth-child(3), #cardAlarmTable td:nth-child(3) {
            width: 20%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #cardAlarmTable td:nth-child(2) {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的文本 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
        }

        body {
            padding-bottom: 60px; /* 添加底部边距 */
        }

        #cardAlarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
        }


        #cardConfirmButton {
            position: absolute;
            top: 23px; /* 将按钮向上移动20px */
            right: 10px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */
        }

        #cardDeleteButton {
            position: absolute;
            top: 23px; /* 将按钮向上移动20px */
            right: 90px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */
        }

        #subwayConfirmButton {
            position: absolute;
            top: 23px; /* 将按钮向上移动20px */
            right: 10px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */
        }

        #cardAlarmTable tbody::after {
            content: "";
            display: block; /* 创建一个新的块级元素 */
            height: 40px; /* 设置元素的高度 */
        }


        /*---------------------------------- 地铁优惠CSS ----------------------------------*/
        #subwayAlarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
            padding-bottom: 6000px; /* 添加底部边距 */
        }

        #subwayAlarmTable thead,
        #subwayAlarmTable tbody tr {
            display: table; /* 使得列宽一致 */
            width: 100%;
            table-layout: fixed; /* 列宽固定 */
        }

        #subwayAlarmTable th, #subwayAlarmTable td {
            text-align: left; /* 左对齐 */
        }

        #subwayAlarmTable th:nth-child(1), #subwayAlarmTable td:nth-child(1) {
            width: 12%; /* 设置第一列（选择框）的宽度 */
        }

        #subwayAlarmTable th:nth-child(2), #subwayAlarmTable td:nth-child(2) {
            width: 45%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #subwayAlarmTable th:nth-child(3), #subwayAlarmTable td:nth-child(3) {
            width: 13%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #subwayAlarmTable th:nth-child(3), #subwayAlarmTable td:nth-child(3),
        #subwayAlarmTable th:nth-child(4), #subwayAlarmTable td:nth-child(4) {
            width: 15%; /* 设置第三列（周限次数）和第四列（月限次数）的宽度 */
        }

        #subwayAlarmTable td:nth-child(2) {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的文本 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
        }

        #subwayAlarmTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
        }

        #subwayAlarmTable tbody::after {
            content: "";
            display: block; /* 创建一个新的块级元素 */
            height: 40px; /* 设置元素的高度 */
        }


        #qinglongEnvDeleteButton {
            position: absolute;
            top: 145px; /* 将按钮向上移动20px */
            right: 100px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */

        }

        #qinglongEnvAddButton {
            position: absolute;
            top: 145px; /* 将按钮向上移动20px */
            right: 20px; /* 将按钮向左移动20px */
            width: 60px; /* 设置按钮的宽度 */
            height: 30px; /* 设置按钮的高度 */
        }


        /*---------------------------------- 青龙面板CSS ----------------------------------*/
        #qinglongEnvTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
            padding-bottom: 6000px; /* 添加底部边距 */
        }

        #qinglongEnvTable thead,
        #qinglongEnvTable tbody tr {
            display: table; /* 使得列宽一致 */
            width: 100%;
            table-layout: fixed; /* 列宽固定 */
        }

        #qinglongEnvTable th, #qinglongEnvTable td {
            text-align: left; /* 左对齐 */
        }

        #qinglongEnvTable th:nth-child(1), #qinglongEnvTable td:nth-child(1) {
            width: 15%; /* 设置第一列（选择框）的宽度 */
        }


        #qinglongEnvTable th:nth-child(2), #qinglongEnvTable td:nth-child(2) {
            width: 20%; /* 设置第二列（闹钟名称）的宽度 */
        }

        #qinglongEnvTable th:nth-child(3), #qinglongEnvTable td:nth-child(3),
        #qinglongEnvTable th:nth-child(4), #qinglongEnvTable td:nth-child(4) {
            width: 40%; /* 设置第三列（周限次数）和第四列（月限次数）的宽度 */
        }

        #qinglongEnvTable td:nth-child(2) {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的文本 */
            text-overflow: ellipsis; /* 用省略号表示溢出的文本 */
        }

        #qinglongEnvTable tbody {
            height: calc(100vh - 200px); /* 视口高度减去其他元素的高度 */
            overflow-y: auto; /* 当内容超出高度时，显示滚动条 */
            display: block; /* 使得overflow样式生效 */
        }

        #qinglongEnvTable tbody::after {
            content: "";
            display: block; /* 创建一个新的块级元素 */
            height: 40px; /* 设置元素的高度 */
        }

        tr.status-success td {
            background-color: lightgreen !important; /* 设置背景颜色为浅绿色 */
        }

        tr.status-error td {
            background-color: lightcoral !important; /* 设置背景颜色为珊瑚红 */
        }


        /* ------------------------------------------------------------------------------------------ */

        #使4个选项卡在同一行展示

        @media screen and (max-width: 600px) {
            .tablinks {
                width: 25%; /* 将每个选项卡的宽度设置为屏幕宽度的 1/4 */
                padding: 5px; /* 根据需要调整内边距 */
                font-size: 12px; /* 根据需要调整字体大小 */
            }
        }

        #cardAlarmTable tbody tr td a { /*设置超链接字体颜色为灰色并移除下划线*/
            /*color: gray !important;*/
            text-decoration: none !important;
        }

        /*------------- 模态框样式 ------------------*/
        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 9999; /* 在其他元素之上 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* 如果内容太多，添加滚动条 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        }

        /* 模态框内容样式 */
        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 9999; /* 在其他元素之上 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* 如果内容太多，添加滚动条 */
            background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        }

        /* 模态框内容样式 */
        /* 模态框内容样式 */
        .modal-content {
            background-color: #fefefe;
            margin: 50% auto; /* 在页面中垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 90%; /* 修改为更小的宽度 */
            max-width: 300px; /* 最大宽度为300px */
        }

        /* 关闭按钮样式 */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /*-------*/
        .done {
            color: gray;
        }

        .not_done {
            color: black;
        }

    </style>
    <script>
        function syncInput() {
            var title = document.getElementById('event_title').value;
            document.getElementById('event_details').value = title;
        }

        function setDefaultDate() {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            var yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;
            document.getElementById('start_date').value = today;
            document.getElementById('end_date').value = today;
        }

        function submitForm() {
            // 获取表单数据
            var formData = new FormData(document.querySelector('form'));
            // 处理活动周期的值
            var frequency = formData.get('frequency');
            if (frequency === '每周') {
                var weekday = formData.get('weekday').replace('周', '');
                frequency += weekday;
            } else if (frequency === '每月') {
                frequency += formData.get('monthday') + '号';
            }
            formData.set('frequency', frequency);

            var object = {};
            formData.forEach(function (value, key) {
                object[key] = value;
            });
            var json = JSON.stringify(object);
            // 调用你的创建闹钟接口
            fetch('http://101.132.157.214/bot/alarm/create', {
                method: 'POST',
                mode: 'cors', // 添加这一行
                credentials: 'include', // 添加这一行
                headers: {
                    'Content-Type': 'application/json'
                },
                body: json
            }).then(response => {
                if (response.ok) {
                    alert("闹钟创建成功😉");
                } else {
                    alert("提交失败，快去看看咋回事吧😂");
                }
            }).catch(error => {
                console.error('Error:', error);
            });
            return false;  // 阻止表单的默认提交行为
        }

        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";

            // 当用户切换到"更新"选项卡时，调用获取闹钟列表的接口
            if (tabName === '更新') {
                const now = new Date();
                const timeString = now.toISOString().substring(0, 10);  // 获取当前日期
                document.querySelector('#更新 h3').innerText = timeString;  // 设置标题
                fetch('http://101.132.157.214/bot/alarm/list?kind=2') // kind=1 打卡; kind=2 抢购
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);  // 打印出收到的数据
                        const tableBody = document.querySelector('#alarmTable tbody');
                        tableBody.innerHTML = ''; // 清空表格
                        data.list.forEach(item => {
                            let checkboxDisabled = '';  // 将 checkboxDisabled 重置为空字符串
                            const row = document.createElement('tr');
                            row.setAttribute('data-id', item.id);  // 添加自定义属性
                            row.setAttribute('data-is_done_today', item.is_done_today);
                            row.setAttribute('data-week_already_count', item.week_already_count);
                            row.setAttribute('data-month_already_count', item.month_already_count);
                            row.setAttribute('data-week_count', item.week_count);
                            row.setAttribute('data-month_count', item.month_count);
                            // 根据今日的值设置显示的文本和行的样式
                            let todayText;
                            if (item.is_done_today === 0) {
                                todayText = '未做';
                                row.style.color = 'black';
                            } else if (item.is_done_today === 1) {
                                todayText = '已做';
                                row.style.color = 'gray';
                                row.style.textDecoration = 'line-through';  /* 添加删除线 */
                                checkboxDisabled = 'disabled';  /* 禁用选择框 */
                            }
                            row.innerHTML = `
                                <td><input type="checkbox" ${checkboxDisabled}></td>
                                <td>${item.alarm_title}</td>
                                <td>${todayText}</td>
                                <td>${item.week_already_count}/${item.week_count}</td>
                                <td>${item.month_already_count}/${item.month_count}</td>`;
                            tableBody.appendChild(row);
                        });
                    }).catch(error => console.error('Error:', error));
            }

            // 当用户切换到"地铁"选项卡时，获取当前可用的地铁优惠列表
            if (tabName === '地铁') {
                const now = new Date();
                const timeString = now.toISOString().substring(0, 10);  // 获取当前日期
                document.querySelector('#地铁优惠').innerText = timeString;  // 设置标题
                fetch('http://101.132.157.214/bot/alarm/list?kind=3') // kind=1 打卡; kind=2 抢购 3地铁
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);  // 打印出收到的数据
                        console.log("--------------------data=", data);  // 打印出收到的数据
                        const tableBody = document.querySelector('#subwayAlarmTable tbody');
                        tableBody.innerHTML = ''; // 清空表格
                        data.list.forEach(item => {
                            let checkboxDisabled = '';  // 将 checkboxDisabled 重置为空字符串
                            const row = document.createElement('tr');
                            row.setAttribute('data-id', item.id);  // 添加自定义属性
                            row.setAttribute('data-week_already_count', item.week_already_count);
                            row.setAttribute('data-month_already_count', item.month_already_count);
                            row.setAttribute('data-week_count', item.week_count);
                            row.setAttribute('data-month_count', item.month_count);
                            row.setAttribute('data-alarm_link', item.alarm_link);
                            // 根据今日的值设置显示的文本和行的样式
                            let todayText;
                            if (item.is_done_today === 0) {
                                todayText = '未做';
                                row.style.color = 'black';
                            } else if (item.is_done_today === 1) {
                                todayText = '已做';
                                row.style.color = 'gray';
                                row.style.textDecoration = 'line-through';  /* 添加删除线 */
                                checkboxDisabled = 'disabled';  /* 禁用选择框 */
                            }
                            row.innerHTML = `
                                <td><input type="checkbox" ${checkboxDisabled}></td>
                                <td><a href="${item.alarm_link}" target="_blank">${item.alarm_title}</a></td>
                                <td>${todayText}</td>
                                <td>${item.week_count === 0 ? '' : item.week_already_count + '/' + item.week_count}</td>
                                <td>${item.month_count === 0 ? '' : item.month_already_count + '/' + item.month_count}</td>`;
                            tableBody.appendChild(row);
                        });
                    }).catch(error => console.error('Error:', error));
            }

            // 当用户切换到"打卡"选项卡时，调用获取闹钟列表的接口
            if (tabName === '打卡') {
                const now = new Date();
                const timeString = now.toISOString().substring(0, 10);  // 获取当前日期
                document.querySelector('#打卡标题').innerText = timeString;  // 设置标题
                fetch('http://101.132.157.214/bot/alarm/list?kind=1') // kind=1 打卡; kind=2 抢购
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);  // 打印出收到的数据
                        const tableBody = document.querySelector('#cardAlarmTable tbody');
                        tableBody.innerHTML = ''; // 清空表格
                        data.list.forEach(item => {
                            let checkboxDisabled = '';  // 将 checkboxDisabled 重置为空字符串
                            const row = document.createElement('tr');
                            row.setAttribute('data-id', item.id);  // 添加自定义属性
                            row.setAttribute('data-is_done_today', item.is_done_today);
                            row.setAttribute('data-week_already_count', item.week_already_count);
                            row.setAttribute('data-month_already_count', item.month_already_count);
                            row.setAttribute('data-week_count', item.week_count);
                            row.setAttribute('data-month_count', item.month_count);
                            row.setAttribute('data-alarm_link', item.alarm_link);
                            // 根据今日的值设置显示的文本和行的样式
                            let todayText;
                            if (item.is_done_today === 0) {
                                todayText = '未做';
                                row.style.color = 'black';
                            } else if (item.is_done_today === 1) {
                                todayText = '已做';
                                row.style.color = 'gray';
                                row.style.textDecoration = 'line-through';  /* 添加删除线 */
                                checkboxDisabled = 'disabled';  /* 禁用选择框 */
                            }
                            const alarmLink = item.alarm_link;
                            let linkContent = `<a href="${alarmLink}" class="alarm-link" data-alarm-link="${alarmLink}">${item.alarm_title}</a>`;
                            if (item.is_done_today === 1) {
                                linkContent = `<a href="${alarmLink}" class="alarm-link done" data-alarm-link="${alarmLink}">${item.alarm_title}</a>`;
                            } else {
                                linkContent = `<a href="${alarmLink}" class="alarm-link not_done" data-alarm-link="${alarmLink}">${item.alarm_title}</a>`;
                            }
                            // const linkContent = `<a href="${alarmLink}" class="alarm-link" data-alarm-link="${alarmLink}">${item.alarm_title}</a>`;
                            row.innerHTML = `
                    <td><input type="checkbox" ${checkboxDisabled}></td>
                    <td>${linkContent}</td>
                    <td>${todayText}</td>`;
                            tableBody.appendChild(row);
                        });
                        // 给所有具有类名"alarm-link"的元素添加点击事件，用于显示模态框或打开链接
                        const modalTriggers = document.querySelectorAll('.alarm-link');
                        modalTriggers.forEach(trigger => {
                            trigger.addEventListener('click', function (event) {
                                const alarmLink = this.getAttribute('data-alarm-link');
                                if (alarmLink && alarmLink.startsWith('http')) {
                                    // 如果是网址，则在当前页面打开链接
                                    window.location.href = alarmLink;
                                } else {
                                    event.preventDefault(); // 阻止默认行为，防止页面跳转
                                    const alarmText = this.innerText;
                                    showModal(alarmText, alarmLink);
                                }
                            });
                        });
                    }).catch(error => console.error('Error:', error));
            }

            // 当用户切换到"青龙面板"选项卡时，调用获取闹钟列表的接口
            if (tabName === '青龙') {
                const now = new Date();
                const timeString = now.toISOString().substring(0, 10);  // 获取当前日期
                document.querySelector('#青龙面板').innerText = timeString;  // 设置标题
                fetch('http://101.132.157.214/bot/envs/list')
                    .then(response => response.json())
                    .then(data => {
                        const tableBody = document.querySelector('#qinglongEnvTable tbody');
                        tableBody.innerHTML = ''; // 清空表格
                        data.envs.forEach(item => {
                            let checkboxDisabled = '';  // 将 checkboxDisabled 重置为空字符串
                            const row = document.createElement('tr');
                            row.setAttribute('data-id', item.id);  // 添加自定义属性
                            row.setAttribute('data-name', item.name);  // 添加自定义属性
                            row.setAttribute('data-value', item.value);
                            row.setAttribute('data-status', item.status);  // 添加自定义属性
                            row.setAttribute('data-remarks', item.remarks);
                            if (item.status === 0) {
                                row.style.color = 'green';
                            } else if (item.status === 1) {
                                row.style.color = 'red';
                            }
                            // 使用模板字符串和插值表达式来创建表格单元格
                            row.innerHTML = `
                                <td><input type="checkbox" ${checkboxDisabled}></td>
                                <td>${item.remarks !== null ? item.remarks : ''}</td>
                                <td>${item.name}</td>
                                <td>${item.value}</td>`;
                            tableBody.appendChild(row);  // 将新创建的<tr>元素添加到<tbody>元素中
                        });
                    }).catch(error => console.error('Error:', error));
            }
        }

        function updateFrequency() {
            var frequency = document.getElementById('frequency').value;
            document.getElementById('weekday_label').style.display = (frequency == '每周') ? 'block' : 'none';
            document.getElementById('monthday_label').style.display = (frequency == '每月') ? 'block' : 'none';
        }
    </script>
</head>
<body onload="setDefaultDate()">

<h2>骑狗跨大海</h2>

<div class="tab">
    <button class="tablinks" onclick="openTab(event, '新建')">新建</button>
    <button class="tablinks" onclick="openTab(event, '打卡')">打卡</button>
    <button class="tablinks" onclick="openTab(event, '更新')">抢购</button>
    <button class="tablinks" onclick="openTab(event, '地铁')">地铁</button>
    <button class="tablinks" onclick="openTab(event, '青龙')">青龙</button>
</div>

<div id="新建" class="tabcontent">
    <form action="http://101.132.157.214/bot/alarm/create" method="post"
          onsubmit="return submitForm()">
        <label for="start_date">开始日期<input type="date" id="start_date"
                                               name="start_date"></label>
        <label for="end_date">结束日期<input type="date" id="end_date"
                                             name="end_date"></label>
        <!--        <label for="end_date">结束日期<input type="date" id="end_date"-->
        <!--                                             name="end_date"></label>-->
        <label for="alarm_kind">活动类型
            <select id="alarm_kind" name="alarm_kind">
                <option value="打卡">打卡</option>
                <option value="抢购">抢购</option>
                <option value="地铁">地铁</option>
            </select>
        </label>
        <label for="frequency">活动周期
            <select id="frequency" name="frequency"
                    onchange="updateFrequency()">
                <option value="每天">每天</option>
                <option value="每周">每周</option>
                <option value="每月">每月</option>
            </select>
        </label>
        <label for="weekday" id="weekday_label" style="display: none;">星期几呀
            <select id="weekday" name="weekday">
                <option value="周一">周一</option>
                <option value="周二">周二</option>
                <option value="周三">周三</option>
                <option value="周四">周四</option>
                <option value="周五">周五</option>
                <option value="周六">周六</option>
                <option value="周日">周日</option>
            </select>
        </label>
        <label for="monthday" id="monthday_label" style="display:
                    none;">多少号呀
            <select id="monthday" name="monthday">
                <!-- 生成1到31的选项 -->
                <script>
                    for (var i = 1; i <= 31; i++) {
                        document.write('<option value="' + i + '">' + i + '</option>');
                    }
                </script>
            </select>
        </label>
        <div id="weekly" style="display: none;">
            <label for="day_of_week">周几
                <select id="day_of_week" name="day_of_week">
                    <option value="1">周一</option>
                    <option value="2">周二</option>
                    <option value="3">周三</option>
                    <option value="4">周四</option>
                    <option value="5">周五</option>
                    <option value="6">周六</option>
                    <option value="7">周日</option>
                </select>
            </label>
        </div>
        <div id="monthly" style="display: none;">
            <label for="day_of_month">几号
                <input type="number" id="day_of_month"
                       name="day_of_month" min="1"
                       max="31">
            </label>
        </div>
        <label for="alarm_time">活动时间
            <input type="time" id="event_time" name="alarm_time"
                   step="600" value="00:00">
        </label>
        <label for="week_count">周限次数
            <select id="week_count" name="week_count">
                <option value="0">不限</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </label>
        <label for="month_count">月限次数
            <select id="month_count" name="month_count">
                <option value="0">不限</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
        </label>
        <label for="alarm_title">活动标题<input type="text" id="event_title"
                                                name="alarm_title" oninput="syncInput()"></label>
        <label for="alarm_detail">活动详情
            <div class="input-with-clear">
                <input type="text" id="event_details"
                       name="alarm_detail">
                <button type="button"
                        onclick="document.getElementById('event_details').value=
                            ''">×
                </button>
            </div>
        </label>
        <label for="alarm_link">活动链接<input type="text" id="event_link"
                                               name="alarm_link"></label>
        <div class="buttons">
            <input type="reset" value="重置">
            <input type="submit" value="确认">
        </div>
    </form>
</div>

<div id="打卡" class="tabcontent">
    <h3 id="打卡标题"></h3>
    <button id="cardDeleteButton" class="update-confirm-button">删除</button>
    <button id="cardConfirmButton" class="update-confirm-button">确认</button>
    <table id="cardAlarmTable">
        <thead>
        <tr>
            <th>选择</th> <!-- 添加一个空的表头单元格 -->
            <th>打卡名称</th>
            <th>今日状态</th>
        </tr>
        </thead>
        <tbody>
        <!-- 在这里插入数据 -->
        </tbody>
    </table>
</div>

<div id="更新" class="tabcontent">
    <h3 id="timeTitle"></h3>
    <button id="confirmButton" class="update-confirm-button">确认</button>
    <div style="display: flex;">
        <table id="alarmTable">
            <thead>
            <tr>
                <th>选择</th> <!-- 添加一个空的表头单元格 -->
                <th>抢购名称</th>
                <th>今日</th>
                <th>周限</th>
                <th>月限</th>
            </tr>
            </thead>
            <tbody>
            <!-- 在这里插入数据 -->
            </tbody>
        </table>
    </div>
</div>

<div id="地铁" class="tabcontent">
    <h3 id="地铁优惠"></h3>
    <button id="subwayConfirmButton" class="update-confirm-button">确认</button>
    <div style="display: flex;">
        <table id="subwayAlarmTable">
            <thead>
            <tr>
                <th>选择</th> <!-- 添加一个空的表头单元格 -->
                <th>地铁优惠</th>
                <th>今日</th>
                <th>周限</th>
                <th>月限</th>
            </tr>
            </thead>
            <tbody>
            <!-- 在这里插入数据 -->
            </tbody>
        </table>
    </div>
</div>

<div id="青龙" class="tabcontent">
    <h3 id="青龙面板"></h3>
    <button id="qinglongEnvDeleteButton" class="update-confirm-button">删除</button>
    <button id="qinglongEnvAddButton" class="update-confirm-button">创建</button>
    <table id="qinglongEnvTable">
        <thead>
        <tr>
            <th>选择</th> <!-- 添加一个空的表头单元格 -->
            <th>备注</th>
            <th>名称</th>
            <th>取值</th>
        </tr>
        </thead>
        <tbody>
        <!-- 在这里插入数据 -->
        </tbody>
    </table>
</div>


<script>
    // 默认打开第一个选项卡
    document.getElementById("新建").style.display = "block";
    document.querySelector(".tablinks").className += " active";

    // --------------------------------------- 抢购任务状态更新 --------------------------------------- //
    document.getElementById('confirmButton').addEventListener('click', function () {
        // 获取所有的选择框
        var checkboxes = document.querySelectorAll('#alarmTable input[type="checkbox"]');
        var checkedRows = [];
        // 遍历选择框，如果被选中，将整个行的数据和自定义属性的值添加到数组中
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var row = checkboxes[i].parentNode.parentNode;
                var rowData = {
                    id: row.getAttribute('data-id'),  // 获取自定义属性的值
                    is_done_today: row.getAttribute('data-is_done_today'),
                    week_already_count: row.getAttribute('data-week_already_count'),
                    month_already_count: row.getAttribute('data-month_already_count'),
                    week_count: row.getAttribute('data-week_count'),
                    month_count: row.getAttribute('data-month_count')
                };
                checkedRows.push(rowData);
            }
        }
        // 如果没有选择框被勾选，就显示一个提示框
        if (checkedRows.length === 0) {
            // 创建一个新的弹出框
            var popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
            popup.style.color = 'white';
            popup.style.padding = '10px';  // 减小内边距
            popup.style.borderRadius = '5px';
            popup.style.zIndex = '1000';
            popup.style.width = '170px';  // 设置宽度
            popup.style.height = '30';  // 设置高度
            popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
            popup.style.textAlign = 'center';  // 使文本水平居中
            popup.textContent = '请至少勾选一个呀😢';  // 修改提示信息
            document.body.appendChild(popup);
            // 5秒后自动消失
            setTimeout(function () {
                document.body.removeChild(popup);  // 移除弹出框
            }, 3000);
            return;  // 如果没有选择框被勾选，就不需要继续执行后面的代码
        }
        // 打印出被选中的行的数据
        console.log('Checked rows: ', checkedRows);
        // 将数组转换为JSON字符串
        var data = JSON.stringify(checkedRows);
        // 打印出将要发送的数据
        console.log('Data to be sent: ', data);
        // 创建一个新的XHR对象
        var xhr = new XMLHttpRequest();
        // 初始化请求
        xhr.open('POST', 'http://101.132.157.214/bot/alarm/update', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 发送请求
        xhr.send(data);
        // 当请求完成时，打印服务器的响应并显示弹出框
        xhr.onload = function () {
            console.log('Server response: ', xhr.responseText);
            // 检查服务器的响应状态
            if (xhr.status == 200) {
                // 创建一个新的弹出框
                var popup = document.createElement('div');
                popup.style.position = 'fixed';
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                popup.style.color = 'white';
                popup.style.padding = '10px';  // 减小内边距
                popup.style.borderRadius = '5px';
                popup.style.zIndex = '1000';
                popup.style.width = '170px';  // 设置宽度
                popup.style.height = '30';  // 设置高度
                popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                popup.style.textAlign = 'center';  // 使文本水平居中
                popup.textContent = '抢购任务更新成功😉';  // 修改提示信息
                document.body.appendChild(popup);
                // 5秒后自动消失
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);
            }
        };
    });


    // --------------------------------------- 地铁优惠状态更新 --------------------------------------- //
    document.getElementById('subwayConfirmButton').addEventListener('click', function () {
        // 获取所有的选择框
        var checkboxes = document.querySelectorAll('#subwayAlarmTable input[type="checkbox"]');
        var checkedRows = [];
        // 遍历选择框，如果被选中，将整个行的数据和自定义属性的值添加到数组中
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var row = checkboxes[i].parentNode.parentNode;
                var rowData = {
                    id: row.getAttribute('data-id'),  // 获取自定义属性的值
                    is_done_today: row.getAttribute('data-is_done_today'),
                    week_already_count: row.getAttribute('data-week_already_count'),
                    month_already_count: row.getAttribute('data-month_already_count'),
                    week_count: row.getAttribute('data-week_count'),
                    month_count: row.getAttribute('data-month_count')
                };
                checkedRows.push(rowData);
            }
        }
        // 如果没有选择框被勾选，就显示一个提示框
        if (checkedRows.length === 0) {
            // 创建一个新的弹出框
            var popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
            popup.style.color = 'white';
            popup.style.padding = '10px';  // 减小内边距
            popup.style.borderRadius = '5px';
            popup.style.zIndex = '1000';
            popup.style.width = '170px';  // 设置宽度
            popup.style.height = '30';  // 设置高度
            popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
            popup.style.textAlign = 'center';  // 使文本水平居中
            popup.textContent = '至少勾选一个呀😢';  // 修改提示信息
            document.body.appendChild(popup);
            // 5秒后自动消失
            setTimeout(function () {
                document.body.removeChild(popup);  // 移除弹出框
            }, 3000);
            return;  // 如果没有选择框被勾选，就不需要继续执行后面的代码
        }
        // 打印出被选中的行的数据
        console.log('Checked rows: ', checkedRows);
        // 将数组转换为JSON字符串
        var data = JSON.stringify(checkedRows);
        // 打印出将要发送的数据
        console.log('Data to be sent: ', data);
        // 创建一个新的XHR对象
        var xhr = new XMLHttpRequest();
        // 初始化请求
        xhr.open('POST', 'http://101.132.157.214/bot/alarm/update', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 发送请求
        xhr.send(data);
        // 当请求完成时，打印服务器的响应并显示弹出框
        xhr.onload = function () {
            console.log('Server response: ', xhr.responseText);
            // 检查服务器的响应状态
            if (xhr.status == 200) {
                // 创建一个新的弹出框
                var popup = document.createElement('div');
                popup.style.position = 'fixed';
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                popup.style.color = 'white';
                popup.style.padding = '10px';  // 减小内边距
                popup.style.borderRadius = '5px';
                popup.style.zIndex = '1000';
                popup.style.width = '170px';  // 设置宽度
                popup.style.height = '30';  // 设置高度
                popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                popup.style.textAlign = 'center';  // 使文本水平居中
                popup.textContent = '地铁优惠更新成功😉';  // 修改提示信息
                document.body.appendChild(popup);
                // 5秒后自动消失
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);
            }
        };
    });


    // --------------------------------------- 更新今日打卡数据【未做-->已做】 --------------------------------------- //
    document.getElementById('cardConfirmButton').addEventListener('click', function () {
        // 获取所有的选择框
        var checkboxes = document.querySelectorAll('#cardAlarmTable input[type="checkbox"]');
        var checkedRows = [];
        // 遍历选择框，如果被选中，将整个行的数据和自定义属性的值添加到数组中
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var row = checkboxes[i].parentNode.parentNode;
                var rowData = {
                    id: row.getAttribute('data-id'),  // 获取自定义属性的值
                    is_done_today: row.getAttribute('data-is_done_today'),
                    week_already_count: row.getAttribute('data-week_already_count'),
                    month_already_count: row.getAttribute('data-month_already_count'),
                    week_count: row.getAttribute('data-week_count'),
                    month_count: row.getAttribute('data-month_count')
                };
                checkedRows.push(rowData);
            }
        }
        // 如果没有选择框被勾选，就显示一个提示框
        if (checkedRows.length === 0) {
            // 创建一个新的弹出框
            var popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
            popup.style.color = 'white';
            popup.style.padding = '10px';  // 减小内边距
            popup.style.borderRadius = '5px';
            popup.style.zIndex = '1000';
            popup.style.width = '170px';  // 设置宽度
            popup.style.height = '30';  // 设置高度
            popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
            popup.style.textAlign = 'center';  // 使文本水平居中
            popup.textContent = '请至少勾选一个😢';  // 修改提示信息
            document.body.appendChild(popup);
            // 5秒后自动消失
            setTimeout(function () {
                document.body.removeChild(popup);  // 移除弹出框
            }, 3000);
            return;  // 如果没有选择框被勾选，就不需要继续执行后面的代码
        }
        // 打印出被选中的行的数据
        console.log('Checked rows: ', checkedRows);
        // 将数组转换为JSON字符串
        var data = JSON.stringify(checkedRows);
        // 打印出将要发送的数据
        console.log('Data to be sent: ', data);
        // 创建一个新的XHR对象
        var xhr = new XMLHttpRequest();
        // 初始化请求
        xhr.open('POST', 'http://101.132.157.214/bot/alarm/update', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 发送请求
        xhr.send(data);
        // 当请求完成时，打印服务器的响应并显示弹出框
        xhr.onload = function () {
            console.log('Server response: ', xhr.responseText);
            // 检查服务器的响应状态
            if (xhr.status == 200) {
                // 创建一个新的弹出框
                var popup = document.createElement('div');
                popup.style.position = 'fixed';
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                popup.style.color = 'white';
                popup.style.padding = '10px';  // 减小内边距
                popup.style.borderRadius = '5px';
                popup.style.zIndex = '1000';
                popup.style.width = '170px';  // 设置宽度
                popup.style.height = '30';  // 设置高度
                popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                popup.style.textAlign = 'center';  // 使文本水平居中
                popup.textContent = '打卡任务更新成功😉';  // 修改提示信息
                document.body.appendChild(popup);
                // 5秒后自动消失
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);
            }
        };
    });

    // --------------------------------------- 删除今日打卡数据 --------------------------------------- //
    document.getElementById('cardDeleteButton').addEventListener('click', function () {
        // 获取所有的选择框
        var checkboxes = document.querySelectorAll('#cardAlarmTable input[type="checkbox"]');
        var checkedRows = [];
        // 遍历选择框，如果被选中，将整个行的数据和自定义属性的值添加到数组中
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var row = checkboxes[i].parentNode.parentNode;
                var rowData = {
                    id: row.getAttribute('data-id'),  // 获取自定义属性的值
                };
                checkedRows.push(rowData);
            }
        }
        // 如果没有选择框被勾选，就显示一个提示框
        if (checkedRows.length === 0) {
            // 创建一个新的弹出框
            var popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
            popup.style.color = 'white';
            popup.style.padding = '10px';  // 减小内边距
            popup.style.borderRadius = '5px';
            popup.style.zIndex = '1000';
            popup.style.width = '170px';  // 设置宽度
            popup.style.height = '30';  // 设置高度
            popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
            popup.style.textAlign = 'center';  // 使文本水平居中
            popup.textContent = '请至少勾选一个😢';  // 修改提示信息
            document.body.appendChild(popup);
            // 5秒后自动消失
            setTimeout(function () {
                document.body.removeChild(popup);  // 移除弹出框
            }, 3000);
            return;  // 如果没有选择框被勾选，就不需要继续执行后面的代码
        }
        // 打印出被选中的行的数据
        console.log('Checked rows: ', checkedRows);
        // 将数组转换为JSON字符串
        var data = JSON.stringify(checkedRows);
        // 打印出将要发送的数据
        console.log('Data to be sent: ', data);
        // 创建一个新的XHR对象
        var xhr = new XMLHttpRequest();
        // 初始化请求
        xhr.open('POST', 'http://101.132.157.214/bot/alarm/delete', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 发送请求
        xhr.send(data);
        // 当请求完成时，打印服务器的响应并显示弹出框
        xhr.onload = function () {
            console.log('Server response: ', xhr.responseText);
            // 检查服务器的响应状态
            if (xhr.status == 200) {
                // 创建一个新的弹出框
                var popup = document.createElement('div');
                popup.style.position = 'fixed';
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                popup.style.color = 'white';
                popup.style.padding = '10px';  // 减小内边距
                popup.style.borderRadius = '5px';
                popup.style.zIndex = '1000';
                popup.style.width = '170px';  // 设置宽度
                popup.style.height = '30';  // 设置高度
                popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                popup.style.textAlign = 'center';  // 使文本水平居中
                popup.textContent = '打卡任务删除成功😉';  // 修改提示信息
                document.body.appendChild(popup);
                // 5秒后自动消失
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);
            }
        };
    });


    // 显示模态框的函数
    function showModal(title, link) {
        console.log('Showing modal with title:', title, 'and link:', link); // 添加日志
        // 创建模态框的 HTML
        const modalHtml = `
        <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2 style="font-weight: bold;">${title}</h2>
                <p style="margin-top: 10px;">${link}</p>
            </div>
        </div>`;
        // 将模态框 HTML 添加到页面中
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        // 获取模态框元素和关闭按钮
        const modal = document.getElementById('myModal');
        const closeBtn = modal.querySelector('.close');
        // 点击关闭按钮时关闭模态框
        closeBtn.addEventListener('click', function () {
            modal.style.display = 'none';
            modal.remove(); // 移除模态框元素
        });
        // 点击模态框外部区域时关闭模态框
        window.addEventListener('click', function (event) {
            if (event.target === modal) {
                modal.style.display = 'none';
                modal.remove(); // 移除模态框元素
            }
        });
        // 显示模态框
        modal.style.display = 'block';
    }


    // --------------------------------------- 青龙环境变量创建 --------------------------------------- //
    document.getElementById('qinglongEnvAddButton').addEventListener('click', function () {
        // 创建一个新的模态框
        var modal = document.createElement('div');
        modal.setAttribute('id', 'myModal');
        modal.setAttribute('class', 'modal');
        var modalContent = document.createElement('div');
        modalContent.setAttribute('class', 'modal-content');
        modal.appendChild(modalContent);

        // 创建关闭按钮
        var closeButton = document.createElement('span');
        closeButton.setAttribute('class', 'close');
        closeButton.textContent = '×';
        modalContent.appendChild(closeButton);

        // 创建表单
        var form = document.createElement('form');
        form.setAttribute('id', 'myForm');
        modalContent.appendChild(form);

// 创建名称输入框
        var nameDiv = document.createElement('div');
        nameDiv.style.display = 'flex';
        nameDiv.style.justifyContent = 'space-between';
        nameDiv.style.alignItems = 'center';  // 横向对齐
        var nameLabel = document.createElement('label');
        nameLabel.setAttribute('for', 'name');
        nameLabel.textContent = '名称:';
        nameDiv.appendChild(nameLabel);
        var nameInput = document.createElement('input');
        nameInput.setAttribute('type', 'text');
        nameInput.setAttribute('id', 'name');
        nameInput.setAttribute('name', 'name');
        nameInput.style.marginLeft = '20px';  // 向右移动20px
        nameInput.style.marginTop = '5px';  // 向下移动5px
        nameDiv.appendChild(nameInput);
        form.appendChild(nameDiv);
        form.appendChild(document.createElement('br'));


        // 创建手机标识下拉框
        var remarkDiv = document.createElement('div');
        remarkDiv.style.display = 'flex';
        remarkDiv.style.justifyContent = 'space-between';
        remarkDiv.style.alignItems = 'center';  // 横向对齐
        var remarkLabel = document.createElement('label');
        remarkLabel.setAttribute('for', 'remarks');
        remarkLabel.textContent = '标识:';
        remarkDiv.appendChild(remarkLabel);
        var remarkSelect = document.createElement('select');
        remarkSelect.setAttribute('id', 'remarks');
        remarkSelect.setAttribute('name', 'remarks');
        remarkSelect.style.marginLeft = '20px';  // 向右移动20px
        remarkSelect.style.marginTop = '5px';  // 向下移动5px
        // 添加默认选项
        var defaultOption = document.createElement('option');
        defaultOption.setAttribute('value', ''); // 设置空值
        defaultOption.textContent = '不填写'; // 设置显示文本
        remarkSelect.appendChild(defaultOption);
        // 添加其他选项
        var option1 = document.createElement('option');
        option1.setAttribute('value', '主机');
        option1.textContent = '主机';
        remarkSelect.appendChild(option1);
        var option2 = document.createElement('option');
        option2.setAttribute('value', '手机1');
        option2.textContent = '手机1';
        remarkSelect.appendChild(option2);
        var option3 = document.createElement('option');
        option3.setAttribute('value', '手机2');
        option3.textContent = '手机2';
        remarkSelect.appendChild(option3);
        var option4 = document.createElement('option');
        option4.setAttribute('value', '手机3');
        option4.textContent = '手机3';
        remarkSelect.appendChild(option4);
        var option5 = document.createElement('option');
        option5.setAttribute('value', '手机4');
        option5.textContent = '手机4';
        remarkSelect.appendChild(option5);
        var option6 = document.createElement('option');
        option6.setAttribute('value', '手机5');
        option6.textContent = '手机5';
        remarkSelect.appendChild(option6);
        remarkDiv.appendChild(remarkSelect);
        form.appendChild(remarkDiv);
        form.appendChild(document.createElement('br'));


        // 创建值输入框
        var valueDiv = document.createElement('div');
        valueDiv.style.display = 'flex';
        valueDiv.style.justifyContent = 'space-between';
        var valueLabel = document.createElement('label');
        valueLabel.setAttribute('for', 'value');
        valueLabel.textContent = '值:';
        valueDiv.appendChild(valueLabel);
        var valueInput = document.createElement('input');
        valueInput.setAttribute('type', 'text');
        valueInput.setAttribute('id', 'value');
        valueInput.setAttribute('name', 'value');
        valueInput.style.marginLeft = '35px';  // 向右移动46px
        valueDiv.appendChild(valueInput);
        form.appendChild(valueDiv);
        form.appendChild(document.createElement('br'));

        // 创建确认和取消按钮
        var buttonDiv = document.createElement('div');
        buttonDiv.style.display = 'flex';
        buttonDiv.style.justifyContent = 'flex-end';  // 靠右展示
        var cancelButton = document.createElement('input');
        cancelButton.setAttribute('type', 'button');
        cancelButton.setAttribute('value', '取消');
        cancelButton.style.marginLeft = '10px';  // 向左移动10px
        cancelButton.addEventListener('click', closeModal);
        buttonDiv.appendChild(cancelButton);
        var confirmButton = document.createElement('input');
        confirmButton.setAttribute('type', 'button');
        confirmButton.setAttribute('value', '确认');
        confirmButton.style.marginLeft = '210px';  // 向右移动10px
        confirmButton.addEventListener('click', submitForm);
        buttonDiv.appendChild(confirmButton);
        form.appendChild(buttonDiv);

        // 将模态框添加到文档中
        document.body.appendChild(modal);

        // 显示模态框
        modal.style.display = 'block';

        // 关闭模态框的函数
        function closeModal() {
            modal.style.display = 'none';
        }

        // 提交表单的函数
        function submitForm() {
            var form = document.getElementById('myForm');
            var name = form.name.value;
            var value = form.value.value;
            console.log('Name: ' + name + ', Value: ' + value);

            // 创建一个新的XHR对象
            var xhr = new XMLHttpRequest();
            // 初始化请求
            xhr.open('POST', 'http://101.132.157.214/bot/envs/add', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            // 创建要发送的数据
            var data = JSON.stringify([{name: name, value: value}]);  // 将数据包装成数组
            // 发送请求
            xhr.send(data);
            // 当请求完成时，打印服务器的响应
            xhr.onload = function () {
                console.log('Server response: ', xhr.responseText);
                if (xhr.status == 200) {  // 如果状态码是200，表示请求成功
                    console.log('Request succeeded!');
                    // 在这里执行你的操作
                    // 创建一个新的弹出框
                    var popup = document.createElement('div');
                    popup.style.position = 'fixed';
                    popup.style.left = '50%';
                    popup.style.top = '50%';
                    popup.style.transform = 'translate(-50%, -50%)';
                    popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                    popup.style.color = 'white';
                    popup.style.padding = '10px';  // 减小内边距
                    popup.style.borderRadius = '5px';
                    popup.style.zIndex = '1000';
                    popup.style.width = '170px';  // 设置宽度
                    popup.style.height = '30';  // 设置高度
                    popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                    popup.style.textAlign = 'center';  // 使文本水平居中
                    popup.textContent = '环境变量创建成功😉';  // 修改提示信息
                    document.body.appendChild(popup);
                    // 5秒后自动消失
                    setTimeout(function () {
                        popup.style.display = 'none';
                    }, 3000);
                } else {
                    console.log('Request failed!');
                    // 在这里执行你的操作
                    // 创建一个新的弹出框
                    var popup = document.createElement('div');
                    popup.style.position = 'fixed';
                    popup.style.left = '50%';
                    popup.style.top = '50%';
                    popup.style.transform = 'translate(-50%, -50%)';
                    popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
                    popup.style.color = 'white';
                    popup.style.padding = '10px';  // 减小内边距
                    popup.style.borderRadius = '5px';
                    popup.style.zIndex = '1000';
                    popup.style.width = '170px';  // 设置宽度
                    popup.style.height = '30';  // 设置高度
                    popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                    popup.style.textAlign = 'center';  // 使文本水平居中
                    popup.textContent = '环境变量创建失败😢';  // 修改提示信息
                    document.body.appendChild(popup);
                    // 5秒后自动消失
                    setTimeout(function () {
                        popup.style.display = 'none';
                    }, 3000);
                }
            };

            modal.style.display = 'none';
        }

        // 点击关闭按钮或者点击模态框外部时关闭模态框
        closeButton.onclick = closeModal;
        window.onclick = function (event) {
            if (event.target == modal) {
                closeModal();
            }
        }
    });


    // --------------------------------------- 删除青龙环境变量 --------------------------------------- //
    document.getElementById('qinglongEnvDeleteButton').addEventListener('click', function () {
        // 获取所有的选择框
        var checkboxes = document.querySelectorAll('#qinglongEnvTable input[type="checkbox"]');
        var checkedRows = [];
        var checkedValues = [];  // 新增一个数组用于保存 value 值
        // 遍历选择框，如果被选中，将整个行的数据和自定义属性的值添加到数组中
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                var row = checkboxes[i].parentNode.parentNode;
                var id = Number(row.getAttribute('data-id'));  // 获取自定义属性的值并转换为数字
                var value = row.getAttribute('data-value');  // 获取 value 值
                checkedRows.push(id);  // 直接添加id到数组中
                checkedValues.push(value);  // 将 value 值添加到数组中
            }
        }
        // 如果没有选择框被勾选，就显示一个提示框
        if (checkedRows.length === 0) {
            // 创建一个新的弹出框
            var popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#FF0000';  // 使用十六进制颜色代码表示红色
            popup.style.color = 'white';
            popup.style.padding = '10px';  // 减小内边距
            popup.style.borderRadius = '5px';
            popup.style.zIndex = '1000';
            popup.style.width = '170px';  // 设置宽度
            popup.style.height = '30';  // 设置高度
            popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
            popup.style.textAlign = 'center';  // 使文本水平居中
            popup.textContent = '请至少勾选一个😢';  // 修改提示信息
            document.body.appendChild(popup);
            // 5秒后自动消失
            setTimeout(function () {
                document.body.removeChild(popup);  // 移除弹出框
            }, 3000);
            return;  // 如果没有选择框被勾选，就不需要继续执行后面的代码
        }
        // 打印出被选中的行的数据
        console.log('Checked rows: ', checkedRows);
        // 将数组转换为JSON字符串
        var data = JSON.stringify(checkedRows);
        // 打印出将要发送的数据
        console.log('Data to be sent: ', data);
        // 创建一个新的XHR对象
        var xhr = new XMLHttpRequest();
        // 初始化请求
        xhr.open('POST', 'http://101.132.157.214/bot/envs/delete', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        // 创建一个新的对象，包含 id 和 value
        var data = JSON.stringify({ids: checkedRows, values: checkedValues});
        console.log("----------------------------------data=", data)
        // 发送请求
        xhr.send(data);
        // 当请求完成时，打印服务器的响应并显示弹出框
        xhr.onload = function () {
            console.log('Server response: ', xhr.responseText);
            // 检查服务器的响应状态
            if (xhr.status == 200) {
                // 创建一个新的弹出框
                var popup = document.createElement('div');
                popup.style.position = 'fixed';
                popup.style.left = '50%';
                popup.style.top = '50%';
                popup.style.transform = 'translate(-50%, -50%)';
                popup.style.background = '#4CAF50';  // 使用十六进制颜色代码表示红色
                popup.style.color = 'white';
                popup.style.padding = '10px';  // 减小内边距
                popup.style.borderRadius = '5px';
                popup.style.zIndex = '1000';
                popup.style.width = '170px';  // 设置宽度
                popup.style.height = '30';  // 设置高度
                popup.style.lineHeight = '15px';  // 设置行高，使文本垂直居中
                popup.style.textAlign = 'center';  // 使文本水平居中
                popup.textContent = '环境变量删除成功😉';  // 修改提示信息
                document.body.appendChild(popup);
                // 5秒后自动消失
                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);
            }
        };
    });


</script>
</body>
</html>
